<template>
  <!--------------------- 我的团队列表 --------------------
* @auto kyle
* @date 2020-12-20
  -->
  <div :id="'list-'+i" class="pos-r pd-24" style="overflow:auto;">
    <!-- <div style="height:1000px;background:#fff;" /> -->
    <item v-for="(item,index) in list" :key="index" :data="item" @click="goDetail" />
    <no-data v-if="list.length === 0" />
    <p v-if="end===true&&list.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
  </div>
</template>

<script>
import item from 'components/orderCount/teamItem'
import noData from 'components/noData'
import { GetUserTeamProductPage } from 'api/order'
export default {
  name: 'TeamList',
  components: { item, noData },
  props: {
    i: {
      type: Number,
      default: 0
    },
    params: {
      type: Object,
      default: () => {
        return {}
      }
    },
    fresh: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 请求参数
      requestData: {
        pageIndex: 1,
        pageSize: 10
      },
      list: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      scollTop: 0,
      end: false
    }
  },

  computed: {

  },
  watch: {
    fresh(newVal, oldVal) {
      console.log('参数改变')
      console.log(newVal)
      this.GetUserTeamProductPage(true)
    }
  },
  mounted() {
    this.GetUserTeamProductPage()
    this.$nextTick(function() {
      document.querySelector('#list-' + this.i).addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    goDetail(data) {
      this.$emit('goDetail', data)
      // this.$router.push({
      //   path: '/orderCount/detail/?userid=' + data.UserId + '&name=' + data.Name + '&productid=' + this.params.productId
      // })
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (_this.$utils.getScrollHeight('list-' + _this.i) - _this.$utils.getClientHeight('list-' + _this.i) - _this.$utils.getScrollTop('list-' + _this.i) <= 5) {
          console.log('触' + _this.i)
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          _this.scollTop = _this.$utils.getScrollTop('list-' + _this.i)
          if (_this.requestData.pageIndex < _this.totalAmout) {
            _this.requestData.pageIndex++
            _this.GetUserTeamProductPage()
            // 这里调用列表接口
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    },
    GetUserTeamProductPage(bool = false) {
      if (bool) {
        this.list = []
        this.requestData.pageIndex = 1
      }
      this.requestData.productId = this.params.productId
      this.requestData.userName = this.params.userName || ''
      this.requestData.startTime = this.params.startTime
      this.requestData.endTime = this.params.endTime
      switch (this.i) {
        case 0:
          this.requestData.buyType = -1
          break
        case 1:
          this.requestData.buyType = 1
          break
        case 2:
          this.requestData.buyType = 0
          break
        default:
          break
      }
      this.scollRequest = false
      GetUserTeamProductPage(this.requestData).then(res => {
        console.log(res)
        this.scollRequest = true
        if (res) {
          if (this.requestData.pageIndex == 1) {
            this.list = []
          }
          this.totalAmout = res.TotalAmout
          this.list = this.list.concat(res.Data)
          this.$emit('changAmout', this.i, res.RecordAmout)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

